<template>
  <div class="pet-info" v-loading="loading">
    <div class="pet-info-card">
      <el-form :model="form" style="display: flex; flex-wrap: wrap">
        <el-form-item label="宠物名字:" label-width="80">
          <el-input
            v-model="form.petName"
            placeholder="宠物名搜索"
            @keyup.enter.native="getPetDataList"
            @clear="getPetDataList"
            clearable
          />
        </el-form-item>
        <el-form-item label="分类:" label-width="80">
          <el-select v-model="form.health">
            <el-option label="全部" value="" />
            <el-option label="健康" value="0" />
            <el-option label="不健康" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="流浪状态:" label-width="100">
          <el-select v-model="form.isStray">
            <el-option label="全部" value="" />
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item>

        <div style="width: 15px"></div>
        <el-button @click="getPetDataList" type="primary" :icon="Search"
          >搜索</el-button
        >

        <el-button @click="handleAdd" type="primary" :icon="Plus"
          >添加</el-button
        >
      </el-form>
    </div>

    <el-table
      :data="tableData"
      stripe
      style="width: 95%"
      border
      max-height="500"
    >
      <el-table-column prop="petName" label="宠物名" align="center" />
      <el-table-column prop="categoryName" label="种类" align="center" />
      <el-table-column
        prop="description"
        label="体型"
        align="center"
        width="100"
      >
        <template #default="scope">
          <div v-if="scope.row.description === 0">小型</div>
          <div v-else-if="scope.row.description === 1">中型</div>
          <div v-else>大型</div>
        </template>
      </el-table-column>

      <el-table-column prop="sex" label="性别" align="center" />

      <el-table-column
        prop="health"
        label="健康状态"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.health === 0"
            type="success"
            size="small"
            style="width: 70px"
            >健康</el-button
          >

          <el-button
            v-if="scope.row.health === 1"
            type="danger"
            size="small"
            style="width: 70px"
            >不健康</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="isStray"
        label="是否流浪"
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.isStray === 0"
            type="success"
            size="small"
            style="width: 70px"
            >否</el-button
          >

          <el-button
            v-if="scope.row.isStray === 1"
            type="danger"
            size="small"
            style="width: 70px"
            >是</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        prop="vaccineStatus"
        label="疫苗接种"
        align="center"
        width="100"
      >
        <template #default="scope">
          <div v-if="scope.row.vaccineStatus === 0">未接种</div>
          <div v-else>已接种</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="vaccineImage"
        label="疫苗证书"
        align="center"
        width="200"
      >
        <template #default="scope">
          <el-image
            v-if="scope.row.vaccineImage"
            style="width: 100px; height: 80px"
            :src="scope.row.vaccineImage"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-teleported="true"
            :preview-src-list="[scope.row.vaccineImage]"
            fit="cover"
          />
          <div v-else>请及时带宠物接种疫苗！</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="petImage"
        label="宠物图片"
        align="center"
        width="200"
      >
        <template #default="scope">
          <el-image
            v-if="scope.row.petImage"
            style="width: 100px; height: 80px"
            :src="scope.row.petImage"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-teleported="true"
            :preview-src-list="[scope.row.petImage]"
            fit="cover"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="signInStatus" label="登记" align="center" /> -->
      <el-table-column
        prop="createTime"
        label="登记日期"
        align="center"
        width="100"
      />

      <el-table-column align="center" width="200" fixed="right">
        <template #header> 操作 </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" @click="handleCheck(scope.row)"
            >查看</el-button
          >

          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 95%; margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>

  <EditDialog @getPetDataList="getPetDataList" ref="editDialogRef" />
  <AddDialog @getPetDataList="getPetDataList" ref="addDialogRef" />
  <CheckDialog ref="checkDialogRef" />
  <DeleteDialog @getPetDataList="getPetDataList" ref="deleteDialogRef" />
</template>

<script setup lang="ts">
import { Plus, Search } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import EditDialog from "./edit-dialog.vue";
import AddDialog from "./add-dialog.vue";
import CheckDialog from "./check-dialog.vue";
import DeleteDialog from "./delete-dialog.vue";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
//弹框
const form = reactive({
  petName: "",
  health: "",
  isStray: "",
});
const tableData = ref([]);
/**
 * ===========start============
 * ============弹框============
 * ====编辑、添加、查看、删除====
 * ============================
 */
const editDialogRef = ref();
const addDialogRef = ref();
const checkDialogRef = ref();
const deleteDialogRef = ref();

const handleEdit = (data: any) => {
  editDialogRef.value.showDialog(data);
};
const handleCheck = (data: any) => {
  checkDialogRef.value.showDialog(data);
};
const handleAdd = () => {
  addDialogRef.value.showDialog();
};
const handleDelete = (id: number | string) => {
  deleteDialogRef.value.showDialog(id);
};
/**
 *============end===============
 */

//分页-start
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const handleSizeChange = () => {
  getPetDataList();
};
const handleCurrentChange = () => {
  getPetDataList();
};
//end

const loading = ref<boolean>(false);
import { getListPetInfo } from "@/api/owner";
const getPetDataList = async () => {
  loading.value = true;

  await getListPetInfo(
    userStore.userDesc.address,
    currentPage.value,
    pageSize.value,
    form.petName,
    form.isStray,
    form.health,
    "0"
  ).then((res: any) => {
    tableData.value = res.data;

    total.value = +res.total;
  });
  loading.value = false;
  let exitLoop = false;
  tableData.value.forEach((item: any) => {
    if (!item.vaccineImage && !exitLoop) {
      ElMessage({
        message: "含有未接种疫苗的宠物，请及时带领宠物去打疫苗！",
        type: "warning",
      });
      exitLoop = true;
    }
  });
};
onMounted(() => {
  getPetDataList();
});
</script>

<style scoped lang="less">
.pet-info {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  &-card {
    width: 95%;
    // margin: 10px 40px;

    height: 50px;
    // border: 1px #ccc solid;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    // padding-left: 50px;
    &::before {
      content: "";
      width: 20px;
      // contain: "";
    }
    &-form {
      width: 100%;
      display: flex;
      padding-top: 10px;
      .el-button {
        margin-left: 30px;
      }
    }
  }
}
// .table_image {
//   background-size: cover;
//   width: 100%;
//   height: 80px;
//   margin: 0;
//   padding: 0;
// }
.pet-info-card {
  width: 100%;
  padding: 10px;
}
</style>
